<template>
  <!-- 底部菜单区域 -->
  <div class="bottom-box">
    <div class="menu-box">
      <i class="iconfont iconmenu" @click="showBottomSetting('dictionary')" />
      <i class="iconfont iconprocess" @click="showBottomSetting('progress')" />
      <i class="iconfont iconbrightness" @click="showBottomSetting('bright')" />
      <i class="iconfont iconA" @click="showBottomSetting('fontSize')" />
    </div>
      <transition
        name="progress-transition"
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutRight"
      >
        <div class="progress-box" v-show="flag === 'progress'">
          <SetProgress :bookAvailable="bookAvailable" />
        </div>
      </transition>
      <transition
        name="bg-color-transition"
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutRight"
      >
        <div class="bg-color-box" v-show="flag === 'bright'">
          <SetBgColor :bgColorArr="bgColorArr" />
        </div>
      </transition>
      <transition
        name="font-size-transition"
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutRight"
      >
        <div class="font-size-box" v-show="flag === 'fontSize'">
          <SetFontSize />
        </div>
      </transition>
  </div>
</template>

<script>
  import SetProgress from './SetProgress.vue';
  import SetBgColor from './SetBgColor.vue';
  import SetFontSize from './SetFontSize.vue';
  import EvemtEmitter from '@/utils';

  export default {
    data() {
      return {
        flag: '',
      }
    },
    components: {
      SetProgress,
      SetBgColor,
      SetFontSize,
    },
    props: {
      isShowTitleAndMenu: {
        type: Boolean,
        default: false,
      },
      bgColorArr: {
        type: Array,
        default: [],
      },
      bookAvailable: {
        type: Boolean,
        default: false,
      }
    },
    methods: {
      showBottomSetting (flag) {
        this.flag = flag;
        // 设置目录
        if (flag === 'dictionary') {
          EvemtEmitter.emit('setDictionary');
        }
      }
    },
    watch: {
      isShowTitleAndMenu(newValue) {
        if (!newValue) {
          this.flag = '';
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
@import '@/assets/style/global.scss';

$border-color: #eee;

.bottom-box {
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  width: 100%;
  padding: 0 px2rem(20);
  box-sizing: border-box;
  // x偏移 y偏移 阴影模糊半径 阴影扩散半径 阴影颜色
  box-shadow: 0 px2rem(-10) px2rem(10) px2rem(10) $border-color;
  .menu-box {
    height: px2rem(80);
    @include flexLayout;
    i {
      font-size: px2rem(40);
    }
  }
  .dictionary-box,
  .progress-box,
  .bg-color-box,
  .font-size-box {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: px2rem(80);
    width: 100%;
    height: px2rem(100);
    box-shadow: 0 px2rem(-10) px2rem(10) px2rem(10) $border-color;
  }
}
</style>